<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <!--<ion-buttons start>-->
      <!--<button tappable ion-button icon-only (click)="goHomeMenuPage()">-->
        <!--<ion-icon color="Gray-color" name="menu"></ion-icon>-->
      <!--</button>-->
    <!--</ion-buttons>-->
    <ion-title>
      <div style="margin: 15px 0" >
        <p tappable (click)="gotoQRCodePage()">{{userName}}</p>
        <p class="cut-title">欢迎来到{{factoryName}}</p>
      </div>
    </ion-title>
    <ion-buttons *ngIf="messageCount > 0" end>
      <button tappable ion-button icon-only (click)="gotoUnreadMessage()" >
        <ion-icon color="Gray-color" name="ios-mail-outline">
          <ion-badge class="bage-message">{{messageCount}}</ion-badge>
        </ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button tappable ion-button icon-only (click)="gotoHomePage()" >
        <ion-icon color="Gray-color" name="ios-home-outline">
        </ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button tappable ion-button icon-only (click)="goSettingPage()" >
        <ion-icon color="Gray-color" name="settings">
        </ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>
  <div class="date-title" tappable (click)="openCalendar()">
    <div>{{selectDay}}
      <ion-icon [@expandDate]="expandDateStatus" style="margin-left: 20px" item-right name="ios-arrow-down"></ion-icon>
    </div>
  </div>
  <ion-calendar [@expandDate]="expandStatus" [(ngModel)]="date"
                [options]="calendarOptions"
                [format]="'YYYY-MM-DD'"
                (onChange)="onChange($event)">
  </ion-calendar>

  <!--<ion-card ion-item  no-lines style="background-image: none;" >-->
    <!--<ion-card-header tappable (click)="openCalendar()">-->
      <!--<ion-row >-->
        <!--<ion-col offset-3 col-3>-->
          <!--<p style="font-weight: bold;font-size: 2rem;color: #686868">{{selectDay}}<ion-icon [@expandDate]="expandDateStatus" style="margin-left: 20px"   item-right name="ios-arrow-down"></ion-icon></p>-->

          <!--&lt;!&ndash;<p style="margin-left: -10px;font-weight: bold;font-size: 1.3em">{{dayStr}}日</p>&ndash;&gt;-->
        <!--</ion-col>-->

        <!--&lt;!&ndash;<ion-col col-2>&ndash;&gt;-->
          <!--&lt;!&ndash;<ion-icon *ngIf="!status"  item-right name="ios-arrow-up" style="margin-left: 57vw" ></ion-icon>&ndash;&gt;-->
          <!--&lt;!&ndash;<ion-icon *ngIf="status"  item-right name="ios-arrow-down" style="margin-left: 57vw" ></ion-icon>&ndash;&gt;-->
        <!--&lt;!&ndash;</ion-col>&ndash;&gt;-->
        <!--&lt;!&ndash;<ion-col col-6 *ngIf="isToday">&ndash;&gt;-->
          <!--&lt;!&ndash;<span style="font-size: 4rem">今天</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</ion-col>&ndash;&gt;-->

      <!--</ion-row>-->
      <!--&lt;!&ndash;<ion-row *ngIf="status">&ndash;&gt;-->
        <!--&lt;!&ndash;<ion-col col-3 >&ndash;&gt;-->
          <!--&lt;!&ndash;{{selectDay}}&ndash;&gt;-->
        <!--&lt;!&ndash;</ion-col>&ndash;&gt;-->
        <!--&lt;!&ndash;<ion-col col-9>&ndash;&gt;-->
          <!--&lt;!&ndash;<ion-icon item-right name="md-arrow-dropup" style="margin-left: 57vw" ></ion-icon>&ndash;&gt;-->
        <!--&lt;!&ndash;</ion-col>&ndash;&gt;-->
      <!--&lt;!&ndash;</ion-row>&ndash;&gt;-->
    <!--</ion-card-header>-->
    <!--<ion-calendar [@expandDate]="expandStatus" [(ngModel)]="date"-->
                  <!--[options]="calendarOptions"-->
                  <!--[format]="'YYYY-MM-DD'"-->
                  <!--(onChange)="onChange($event)">-->
    <!--</ion-calendar>-->



  <!--</ion-card>-->


  <ion-list no-lines class="type-list"  [ngSwitch]="listLength">

    <!--3个item-->
    <div *ngSwitchCase="3">
      <div *ngFor="let item of typeList; index as i">
        <ion-item tappable  class="item-5" (click)="getMealTypeDetail(item, i)">
          <ion-avatar item-start>
            <img src="{{item.imgUrl}}"/>
          </ion-avatar>
          {{item.label}}
          <!--<ion-icon *ngIf="!(item.value === valueStr)" name="ios-arrow-forward-outline" item-end></ion-icon>-->
          <ion-icon [@expand]="item.direction" name="ios-arrow-down" item-end></ion-icon>
        </ion-item>
        <div [@expand]="item.status">
          <ion-list no-lines>
            <div *ngFor="let p of item?.officeList; index as ci">
              <ion-item tappable class="item-list-normal" (click)="getProductList(item, p, i, ci)">
                <ion-avatar item-start>
                  <img src="{{p.imgUrl}}"/>
                </ion-avatar>
                {{p.name}}
                <!--<ion-icon *ngIf="!p.status" name="ios-arrow-forward-outline" item-end></ion-icon>-->
                <ion-icon [@expandDetail]="p.direction" name="ios-arrow-down" item-end></ion-icon>
              </ion-item>
              <div [@expandDetail]="p.status" class="product-list-detail">
                <div *ngFor="let de of p.productList" class="product-item-detail" tappable (click)="showDetailModal(de, p.id, item.value)">

                  <img src="{{de.imgMainUrl}}"/>
                  <!--<img src='assets/imgs/Blank_Image_2.png' alt="">-->

                  <!--轮播图-->
                  <!--<ion-slide *ngFor="let path of de?.imgUrl">-->
                  <!--<img src="{{path}}"/>-->
                  <!--</ion-slide>-->

                  <ion-item>
                    <p class="product-title">{{de.name}}<span style="margin-left: 10px">¥{{de.price}}</span></p>
                    <p class="message-content">包括： {{de.productName}} </p>
                    <button class="order-button" ion-button color="secondary" (click)="doOrder($event, de, p.id, item.value)">订餐</button>
                    <ion-icon name="ios-arrow-forward-outline" item-end></ion-icon>
                  </ion-item>
                </div>
              </div>
            </div>
          </ion-list>
        </div>
      </div>
    </div>

    <!--4个item-->
    <div *ngSwitchCase="4">
      <div *ngFor="let item of typeList; index as i">
        <ion-item tappable  class="item-5" (click)="getMealTypeDetail(item, i)">
          <ion-avatar item-start>
            <img src="{{item.imgUrl}}"/>
          </ion-avatar>
          {{item.label}}
          <!--<ion-icon *ngIf="!(item.value === valueStr)" name="ios-arrow-forward-outline" item-end></ion-icon>-->
          <ion-icon [@expand]="item.direction" name="ios-arrow-up" item-end></ion-icon>
        </ion-item>
        <div [@expand]="item.status">
          <ion-list no-lines>
            <div *ngFor="let p of item?.officeList; index as ci">
              <ion-item tappable class="item-list-normal" (click)="getProductList(item, p, i, ci)">
                <ion-avatar item-start>
                  <img src="{{p.imgUrl}}"/>
                </ion-avatar>
                {{p.name}}
                <!--<ion-icon *ngIf="!p.status" name="ios-arrow-forward-outline" item-end></ion-icon>-->
                <ion-icon [@expandDetail]="p.direction" name="ios-arrow-down" item-end></ion-icon>
              </ion-item>
              <div [@expandDetail]="p.status" class="product-list-detail">
                <div *ngFor="let de of p.productList" class="product-item-detail" tappable (click)="showDetailModal(de, p.id, item.value)">

                  <img src="{{de.imgMainUrl}}"/>
                  <!--<img src='assets/imgs/Blank_Image_2.png' alt="">-->

                  <!--轮播图-->
                  <!--<ion-slide *ngFor="let path of de?.imgUrl">-->
                  <!--<img src="{{path}}"/>-->
                  <!--</ion-slide>-->

                  <ion-item>
                    <p class="product-title">{{de.name}}<span style="margin-left: 10px">¥{{de.price}}</span></p>
                    <p class="message-content">包括： {{de.productName}} </p>
                    <button class="order-button" ion-button color="secondary" (click)="doOrder($event, de, p.id, item.value)">订餐</button>
                    <ion-icon name="ios-arrow-forward-outline" item-end></ion-icon>
                  </ion-item>
                </div>
              </div>
            </div>
          </ion-list>
        </div>
      </div>
    </div>

    <!--5个item-->
    <div *ngSwitchCase="5">
      <div *ngFor="let item of typeList; index as i">
        <ion-item tappable  class="item-5" (click)="getMealTypeDetail(item, i)">
          <ion-avatar item-start>
            <img src="{{item.imgUrl}}"/>
          </ion-avatar>
          {{item.label}}
          <!--<ion-icon *ngIf="!(item.value === valueStr)" name="ios-arrow-forward-outline" item-end></ion-icon>-->
          <ion-icon [@expand]="item.direction" name="ios-arrow-down" item-end></ion-icon>
        </ion-item>
        <div [@expand]="item.status">
          <ion-list no-lines>
            <div *ngFor="let p of item?.officeList; index as ci">
              <ion-item tappable class="item-list-normal" (click)="getProductList(item, p, i, ci)">
                <ion-avatar item-start>
                  <img src="{{p.imgUrl}}"/>
                </ion-avatar>
                {{p.name}}
                <!--<ion-icon *ngIf="!p.status" name="ios-arrow-forward-outline" item-end></ion-icon>-->
                <ion-icon [@expandDetail]="p.direction" name="ios-arrow-down" item-end></ion-icon>
              </ion-item>
              <div [@expandDetail]="p.status" class="product-list-detail">
                <div *ngFor="let de of p.productList" class="product-item-detail" tappable (click)="showDetailModal(de, p.id, item.value)">

                  <img src="{{de.imgMainUrl}}"/>
                  <!--<img src='assets/imgs/Blank_Image_2.png' alt="">-->

                  <!--轮播图-->
                  <!--<ion-slide *ngFor="let path of de?.imgUrl">-->
                  <!--<img src="{{path}}"/>-->
                  <!--</ion-slide>-->

                  <ion-item>
                    <p class="product-title">{{de.name}}<span style="margin-left: 10px">¥{{de.price}}</span></p>
                    <p class="message-content">包括： {{de.productName}} </p>
                    <button class="order-button" ion-button color="secondary" (click)="doOrder($event, de, p.id, item.value)">订餐</button>
                    <ion-icon name="ios-arrow-forward-outline" item-end></ion-icon>
                  </ion-item>
                </div>
              </div>
            </div>
          </ion-list>
        </div>
      </div>
    </div>
    <div *ngSwitchDefault>
      <ion-item class="item-3" *ngFor="let item of typeList">
        <ion-avatar item-start>
          <img src="{{item.imgUrl}}"/>
        </ion-avatar>
        {{item.label}}
        <ion-icon name="ios-arrow-down" item-end></ion-icon>
      </ion-item>
    </div>
  </ion-list>


  <div *ngIf="(isNull && typeList.length === 0)" class="null-tips">
    <img src="assets/imgs/null.png" alt="">
    <div>暂无数据</div>
  </div>


  <!--<ion-card *ngFor="let item of typeList"  class="ion-card-prod"  no-lines tappable (click)="gotoSelectTypePage(item.value, factoryName)">-->
    <!--<img src="{{item.imgUrl}}"/>-->
    <!--<div class="card-title">{{item.label}}</div>-->
  <!--</ion-card>-->


</ion-content>
